<template>
  <div class="previewBox">
    <el-row>
      <el-col :span="4" :offset="20">
        <el-switch
          :width="30"
          v-model="lineStyleTime"
          active-color="#409EFF"
          active-value="month"
          active-text="月"
          inactive-color="#409EFF"
          inactive-value="week"
          inactive-text="周"
          @change="getData"
        />
      </el-col>
    </el-row>
    <el-row :gutter="1" style="margin:20px 0;">
      <el-col :span="12">
        <coursetop :course-name-array="courseNameArray" :num-array="numArray" :key="key"/>
      </el-col>
      <el-col :span="12">
        <coursedis :live-num="liveNum" :normal-num="normalNum" :new-num="newNum"/>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin:20px 0;">
      <el-col :span="12">
        <div style="margin: 10px">直播课程</div>
        <el-table :data="liveCourseList" border style="width: 100%">
          <el-table-column prop="title" label="课程名称" width="300" align="center"/>
          <el-table-column prop="salesVolume" label="销量" align="center"/>
          <!--<el-table-column label="操作" align="center">-->
            <!--<template slot-scope="scope">-->
              <!--<el-button type="primary" size="small" icon="el-icon-view">查看</el-button>-->
            <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </el-col>
      <el-col :span="12">
        <div style="margin: 10px">录播课程</div>
        <el-table :data="normalCourseList" border style="width: 100%">
          <el-table-column prop="title" label="课程名称" width="300" align="center"/>
          <el-table-column prop="salesVolume" label="销量" align="center"/>
          <!--<el-table-column label="操作" align="center">-->
            <!--<template slot-scope="scope">-->
              <!--<el-button type="primary" size="small" icon="el-icon-view">查看</el-button>-->
            <!--</template>-->
          <!--</el-table-column>-->
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Coursetop from './components/coursepreview/coursetop'
import Coursedis from './components/coursepreview/coursedis'
import { getTenantId } from '@/utils/auth'
import { getCoursePreviewData } from '@/api/user/user'
export default {
  components: {
    Coursetop,
    Coursedis
  },
  data() {
    return {
      lineStyleTime: 'week',
      courseNameArray: [],
      numArray: [],
      liveNum: 0,
      normalNum: 0,
      newNum: 0,
      liveCourseList: [],
      normalCourseList: [],
      key: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const params = {}
      params.timeType = this.lineStyleTime
      params.tenantId = getTenantId()
      getCoursePreviewData(params).then(res => {
        this.courseNameArray = res.data.courseNameArray
        this.numArray = res.data.numArray

        this.liveNum = res.data.liveNum
        this.normalNum = res.data.normalNum
        this.newNum = res.data.newNum

        this.liveCourseList = res.data.liveCourseList
        this.normalCourseList = res.data.normalCourseList
        this.key++
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.previewBox {
  padding: 20px;
}
</style>
